<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('后台管理')"/>
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="hold-transition skin-blue sidebar-mini layout-boxed">
<div class="wrapper">
    <th:block th:include="include :: headbar"/>
    <th:block th:include="include :: sidebar"/>
    <div class="content-wrapper">
        <section class="content-header">
            <h1>&nbsp;</h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">商城管理</a></li>
                <li class="active"><a href="/mall/goods">商品管理</a></li>
            </ol>
        </section>
        <section class="content">
            <div class="box box-solid">
                <div class="box-header">
                    <button type="button" class="btn btn-sm btn-flat" onclick="javascript:history.go(-1)">返回</button>
                    <button type="button" class="btn btn-success btn-sm btn-flat" onclick="submitHandler()">提交</button>
                </div>
                <form class="box-body" style="font-size: 12px;" id="form" th:object="${goods}">
                    <div class="row">
                        <input type="hidden" th:field="*{goodsId}">
                        <div class="col-xs-4">
                            <div class="form-group">
                                <label>编号</label>
                                <input type="text" class="form-control input-sm" name="goodsName" id="goodsId"
                                       th:field="*{goodsId}" required readonly>
                            </div>
                            <div class="form-group">
                                <label>名称</label>
                                <input type="text" class="form-control input-sm" name="goodsName" id="goodsName"
                                       th:field="*{goodsName}" required>
                            </div>
                            <div class="form-group">
                                <label>当前价格</label>
                                <input type="text" class="form-control input-sm" name="price" th:field="*{price}">
                            </div>
                            <div class="form-group">
                                <label>原价</label>
                                <input type="text" class="form-control input-sm" name="originalPrice"
                                       th:field="*{originalPrice}">
                            </div>
                            <div class="form-group">
                                <label>备注</label>
                                <input type="text" class="form-control input-sm" name="remark" th:field="*{remark}">
                            </div>
                            <div class="form-group">
                                <label>MD5</label>
                                <input type="text" class="form-control input-sm" name="md5" id="md5" th:field="*{md5}">
                            </div>
                            <div class="form-group">
                                <label>分类</label>
                                <select class="form-control input-sm" name="classifyId" th:field="*{classifyId}">
                                    <option th:each="classify : ${classifyList}" th:value="${classify.classifyId}"
                                            th:text="${classify.classifyName}"></option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>推荐</label>
                                <select class="form-control input-sm" name="top" th:field="*{top}">
                                    <option value="1">推荐</option>
                                    <option value="0">普通</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label>关键词</label> <span style="color: red">请用英文“,”隔开</span>
                                <input type="text" class="form-control input-sm" name="keywords" th:field="*{keywords}">
                            </div>
                        </div>
                        <div class="col-xs-8">
                            <div class="form-group" id="image_list"></div>
                            <div class="form-group">
                                <label>上传图片</label><br/>
                                <input type="hidden" class="form-control input-sm" name="mainImage"
                                       th:field="*{mainImage}"/>
                                <input type="hidden" class="form-control input-sm" name="subImages"
                                       th:field="*{subImages}"/>
                                <button type="button" class="btn btn-sm btn-primary" id="browse">浏览</button>
                                <span style="color: red;">（双击可删除）</span>
                            </div>
                            <div class="form-group">
                                <label>上传车模</label><br/>
                                <input class="form-control input-sm" name="url" id="url" readonly th:field="*{url}"/>
                                <div style="height: 10px;"></div>
                                <button type="button" class="btn btn-sm btn-primary" id="browse2">浏览</button>
                            </div>
                            <div class="form-group">
                                <label>卖点</label>
                                <textarea  class="form-control" name="description"
                                       th:field="*{description}"></textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </div>
    <th:block th:include="include :: copyright"/>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: bootstrap-fileinput-js"/>
<script th:inline="javascript">
    var prefix = "/mall/goods";
    $(function () {
        uploadImg();
        uploadImg2();
        setImages($('#subImages').val());
    });

    function submitHandler() {
        getImages();
        if ($.validate.form()) {
            var json = $.common.formToJSON('form');
            // 2019-11-29
            $("input[name='goodsId']").val(json.goodsId);
            $.post(prefix + '/save', json, function () {
                window.location.href = '/mall/goods';
            });
        }
    }

    function uploadImg() {
        var uploader = new plupload.Uploader({
            browse_button: 'browse',
            url: '/file/upload',
            flash_swf_url: '/plugin/plupload/Moxie.swf',
            sliverlight_xap_url: '/plugin/plupload/Moxie.swf',
            multi_selection: true,
            filters: {
                mime_types: [
                    {title: "图片文件", extensions: "jpg,gif,png,bmp"}
                ],
                max_file_size: '150mb'
            }
        });
        uploader.init();
        uploader.bind('FilesAdded', function (uploader, files) {
            $.each(files, function (key, value) {
                //添加文件' + value.name;
            });
            uploader.start();
        });
        uploader.bind('FileUploaded', function (uploader, file, responseObject) {

            var resp = JSON.parse(responseObject.response);
            console.log(resp);
            $('#image_list').append('<img style="width: 100px;" class="img-thumbnail" thumbSrc="' + resp.data + '" src="' + resp.data + '">');
        });
    }


    function uploadImg2() {
        var uploader = new plupload.Uploader({
            browse_button: 'browse2',
            url: '/file/uploadCar',
            flash_swf_url: '/plugin/plupload/Moxie.swf',
            sliverlight_xap_url: '/plugin/plupload/Moxie.swf',
            multi_selection: false,
            filters: {
                max_file_size: '100mb'
            }
        });
        uploader.init();
        uploader.bind('FilesAdded', function (uploader, files) {
            $.each(files, function (key, value) {
                //添加文件' + value.name;
            });
            uploader.start();
        });
        uploader.bind('FileUploaded', function (uploader, file, responseObject) {
            var resp = JSON.parse(responseObject.response);
            $('#url').val(resp.data.name);
            $("input[name='md5']").val(resp.data.md5);
        });
    }

    function setImages(subImages) {
        if (!subImages)
            return;
        var list = subImages.split(',');
        var str = [];
        for (var i in list) {
            if (list[i] == '') {
                continue;
            }
            str += '<img style="width: 100px;" class="img-thumbnail"  thumbSrc="' + list[i] + '"  src="' + list[i] + '">';
        }
        $('#image_list').html(str);
    }

    function getImages() {
        var imgArr = [];
        $('#image_list').find('.img-thumbnail').each(function () {
            imgArr.push($(this).attr('thumbSrc'));
        });
        if (imgArr.length > 0 && imgArr[0] != '') {
            $('input[name=mainImage]').val(imgArr[0]);
        }
        $('input[name=subImages]').val(imgArr.join(','));
    }

    $("#fileInput").on("fileimageuploaded", function (event, files) {
        console.log(files);
    });

    $('#image_list').on('dblclick', '.img-thumbnail', function () {
        $(this).remove();
    });

</script>
</body>
</html>
